<template>
    <van-form @submit="onSubmit">
        <van-field
            v-model="formData.mobileVal"
            name="mobileVal"
            label="手机号"
            placeholder="手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field
            v-model="formData.captcha"
            name="mobileVal"
            label="验证码"
            placeholder="验证码"
            :rules="[{ required: true, message: '请填写验证码' }]"
        />
        <div class="submitBtns">
            <van-button round type="primary">获取验证码</van-button>
            <van-button round type="primary" native-type="submit">提交</van-button>
        </div>
    </van-form>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import { sendCaptcha, flowExchange } from "@/api/unicom";

export default defineComponent({
    setup() {
        const onSubmit = () => {
            sendCaptcha({ phoneVal: "17607101164" });
        };
        const formData = reactive({
            mobileVal: null,
            captcha: null,
        });
        return {
            onSubmit,
            formData,
        };
    },
});
</script>

<style scoped lang="scss">
.submitBtns {
    margin: 16px;
    display: flex;
    justify-content: space-evenly;
}
</style>
